<template>
  <div class="sys_header">
    <div
      :class="'sys_header_menu1 ' + (active === '1' ? 'active' : '')"
      @click="go2Page('/roadIn')"
    >
      路内资源
    </div>
    <div
      :class="'sys_header_menu2 ' + (active === '2' ? 'active' : '')"
      @click="go2Page('/roadOut')"
    >
      路外资源
    </div>
    <div
      :class="'sys_header_menu3 ' + (active === '3' ? 'active' : '')"
      @click="go2Page('/newEnergy')"
    >
      新能源
    </div>
    <div
      :class="'sys_header_menu4 ' + (active === '4' ? 'active' : '')"
      @click="go2Page('/shareBike')"
    >
      共享单车
    </div>
    <div
      :class="'sys_header_menu5 ' + (active === '5' ? 'active' : '')"
      @click="go2Page('/keySearch')"
    >
      热点巡查
    </div>
    <div
      :class="'sys_header_menu6 ' + (active === '6' ? 'active' : '')"
      @click="go2Page('/smartSafe')"
    >
      智安联控
    </div>
    <div class="back_to_home" @click="go2Page('/home')"></div>
    <div class="home_top_weather">
      <div class="home_top_weather_container">
        <el-row>
          <el-col :span="4">
            {{ time1 }}
          </el-col>
          <el-col :span="3"> 星期{{ time2 }} </el-col>
          <el-col :span="5">
            {{ time3 }}
          </el-col>
          <el-col :span="5">
            <div class="tq" :style="'background-image: url(' + img + ');'">
              {{ tq }}
            </div>
          </el-col>
          <el-col :span="3">
            {{ wd }}
          </el-col>
          <el-col :span="4">
            {{ feng }}
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 新增后台入口 -->
    <div class="goBackAdmin" @click="goBackAdmin">
      <i class="iconfont icon-houtaiguanli"></i>
    </div>
  </div>
</template>

<script>
import config from "@/api/config.js";

Date.prototype.format = function(fmt) {
  const o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};

export default {
  name: "sysHeader",
  props: {
    active: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      img: "",
      time1: "",
      time2: "",
      time3: "",
      tq: "",
      wd: "",
      feng: "",
      timeInterval: undefined,
      weekMap: {
        0: "日",
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
      },
    };
  },
  mounted() {
    this.getWeather();
    this.setTimeLoop();
  },
  methods: {
    setTimeLoop() {
      if (this.timeInterval) {
        clearInterval(this.timeInterval);
      }
      const nowDate = new Date();
      this.time1 = nowDate.format("hh:mm:ss");
      this.time2 = this.weekMap[nowDate.getDay()];
      this.time3 = nowDate.format("yyyy/MM/dd");
      this.timeInterval = setInterval(() => {
        const nowDate = new Date();
        this.time1 = nowDate.format("hh:mm:ss");
        this.time2 = this.weekMap[nowDate.getDay()];
        this.time3 = nowDate.format("yyyy/MM/dd");
      }, 1000);
    },
    getWeather() {
      this.$api.get(config.basePath + "park/index/weather", {}, (response) => {
        if (response.status >= 200 && response.status < 300) {
          const data = response.data.data;
          this.tq = data.wea;
          this.wd = data.tem2 + "-" + data.tem1 + "℃";
          this.feng = data.win;
          this.img = data.wea_img;
        } else {
          //console.log(response.message);
        }
      });
    },
    go2Page(url) {
      this.$router.push({
        path: url,
      });
    },
    goBackAdmin() {
      window.location.href = "http://192.168.9.121:8083/#/";
    },
  },
};
</script>

<style scoped>
.goBackAdmin {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-houtaiguanli {
  font-size: 20px;
  color: #2577a8;
}
.back_to_home {
  position: absolute;
  width: 600px;
  height: 80px;
  top: 0;
  left: 50%;
  margin-left: -300px;
  cursor: pointer;
}
.tq {
  background-size: 20px 20px;
  padding-left: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 center;
}
.home_top_weather_container {
  padding: 26px 22px 0 22px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #fff;
}
.home_top_weather {
  width: 647px;
  height: 76px;
  position: absolute;
  top: 60px;
  left: 50%;
  margin-left: -323.5px;

  /* background-image: url("~@/assets/images/top_wether_bg.png"); */
  background-repeat: no-repeat;
  background-size: 647px 76px;
  background-position: center 0;
}
.sys_header {
  height: 82px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 102;
  background-image: url("~@/assets/images/top_header_bg.png");
  background-repeat: no-repeat;
  background-size: 1904px 82px;
  background-position: center 0;
}
.sys_header_menu1 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_l.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  left: 100px;
  top: 11px;
}
.sys_header_menu2 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_l.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  left: 267px;
  top: 11px;
}
.sys_header_menu3 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_l.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  left: 434px;
  top: 11px;
}

.sys_header_menu4 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_r.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  right: 434px;
  top: 11px;
}

.sys_header_menu5 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_r.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  right: 267px;
  top: 11px;
}
.sys_header_menu6 {
  position: absolute;
  width: 177px;
  height: 44px;
  line-height: 44px;
  background-image: url("~@/assets/images/menu_default_r.png");
  background-repeat: no-repeat;
  background-size: 177px 44px;
  background-position: center 0;
  text-align: center;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #4290bd;
  right: 100px;
  top: 11px;
}
.sys_header_menu1:hover,
.sys_header_menu2:hover,
.sys_header_menu3:hover,
.sys_header_menu1.active,
.sys_header_menu2.active,
.sys_header_menu3.active {
  background-image: url("~@/assets/images/menu_active_l.png");
  cursor: pointer;
  color: #32ffb4;
}

.sys_header_menu4:hover,
.sys_header_menu5:hover,
.sys_header_menu6:hover,
.sys_header_menu4.active,
.sys_header_menu5.active,
.sys_header_menu6.active {
  background-image: url("~@/assets/images/menu_active_r.png");
  cursor: pointer;
  color: #32ffb4;
}
</style>
